<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <title>科研信息列表</title>

    <!-- CSS  -->
    <#include "_css.ftl">
</head>

<body>
<#include "_nav.ftl">

<div class="layui-main" style="margin-top: 32px">
    <div class="site-title">
        <fieldset>
            <legend><a>科研信息列表</a></legend>
        </fieldset>
    </div>
    <div class="layui-form-item" style="margin-top: 32px;margin-left: -20px">
        <label class="layui-form-label">按月份筛选</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="time-filter">
        </div>
    </div>
    <div class="layui-row" style="margin-top: 32px">
        <table id="content-table" lay-filter="content-table"></table>
    </div>
</div>

<#include "_js.ftl">

<script type="text/html" id="toolbarTemplate">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addData">新增数据</button>
    </div>
</script>

<script type="text/html" id="barTemplate">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    $(function () {


        var table = layui.table;

        //第一个实例
        var tableIns = table.render({
            elem: '#content-table'
            , url: '/scientific/list' //数据接口
            , page: true //开启分页
            , limit: 10
            , toolbar: '#toolbarTemplate'
            , cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, hide: true}
                , {field: 'date', title: '日期'}
                , {field: 'title', title: '标题'}
                , {field: 'content', title: '内容', width: '50%'}
                , {fixed: 'right', width: 150, align: 'center', toolbar: '#barTemplate'}
            ]]
        });

        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#time-filter', //指定元素
            type: 'month',
            done: function (value, date, endDate) {
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                tableIns.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        date: value
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        });

        table.on('toolbar(content-table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addData':
                    $.get('/scientific/get_empty', {}, function (str) {
                        layer.open({
                            title: '新增',
                            type: 1,
                            area: ['1200px', '600px'], //宽高
                            content: str,
                            success: function (layero, index) {
                                imageUploaderSetup();
                                var laydate = layui.laydate;

                                //执行一个laydate实例
                                laydate.render({
                                    elem: '#date' //指定元素
                                });

                                //提交请求
                                $('#submit-btn').on('click', function () {
                                    // FormData上传图片
                                    var formFile = new FormData();
                                    formFile.append("date", $('#date').val());
                                    formFile.append("title", $('#title').val());
                                    formFile.append("content", $('#content').val());
                                    // 遍历图片imgFile添加到formFile里面
                                    $.each(imgFile, function (i, file) {
                                        formFile.append('files', file);
                                    });
                                    $.ajax({
                                        url: '/scientific/add',
                                        type: 'POST',
                                        data: formFile,
                                        async: true,
                                        cache: false,
                                        contentType: false,
                                        processData: false,
                                        // traditional:true,
                                        dataType: 'json',
                                        success: function (res) {
                                            if (res.code === 0) {
                                                layer.msg(res.msg);
                                                tableIns.reload();
                                                layer.close(index);
                                            } else {
                                                layer.msg(res.msg)
                                            }
                                        },
                                        error: function (res) {
                                            console.log(res);
                                        }
                                    })
                                });
                            }
                        });
                    });

                    break;
            }
        });

        table.on('tool(content-table)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('是否确定删除', function (index) {
                    $.get('/scientific/delete', {id: data.id}, function (data) {
                        obj.del();
                        layer.close(index);
                        tableIns.reload();
                    });

                });
            } else if (obj.event === 'edit') {
                $.get('/scientific/get_one', {id: data.id}, function (str) {
                    layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['1200px', '600px'], //宽高
                        content: str,
                        success: function (layero, index) {
                            imageUploaderSetup();
                            var laydate = layui.laydate;

                            //执行一个laydate实例
                            laydate.render({
                                elem: '#date' //指定元素
                            });

                            //提交请求
                            $('#submit-btn').on('click', function () {
                                // FormData上传图片
                                var formFile = new FormData();
                                formFile.append("id", data.id);
                                formFile.append("date", $('#date').val());
                                formFile.append("title", $('#title').val());
                                formFile.append("content", $('#content').val());
                                // 遍历图片imgFile添加到formFile里面
                                $.each(imgFile, function (i, file) {
                                    formFile.append('files', file);
                                });
                                $.ajax({
                                    url: '/scientific/edit',
                                    type: 'POST',
                                    data: formFile,
                                    async: true,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    // traditional:true,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code === 0) {
                                            layer.msg(res.msg);
                                            tableIns.reload();
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.msg)
                                        }
                                    },
                                    error: function (res) {
                                        console.log(res);
                                    }
                                })
                            });
                        }
                    });
                });


            }
        });
    })
    ;
</script>
</body>

</html>
